<template>
	<div id="microDetail" v-loading="loading" element-loading-text="加载中">
		<div class="top-coursedel" v-if="showChapter == false">
			<longCourseCard :tableData="courseDataV" @change="experienceVideoChange"></longCourseCard>
		</div>

		<div class="top-video" v-else>
			<el-card class="box-card">
				<div class="top-title">
					<p class="one-ellipsis">{{ courseData.title }}</p>
				</div>
				<div class="player-wrap" :class="[{ fullshow: fullScreenShow == true }]">
					<el-row :gutter="20">
						<el-col :span="18">
							<div class="player-box">
								<Video
									:videoUrl="videoUrl"
									:strategy="strategy"
									:learningStatus="learningStatus"
									:courseType="this.$route.meta.type"
									@setLearningStatus="setLearningStatus()"
								></Video>
							</div>
						</el-col>
						<el-col :span="6" v-show="fullScreenShow == false">
							<div class="chapter-box">
								<div class="chapter-wrap">
									<div class="chapter--wrap-item clearfix">
										<el-collapse v-model="active">
											<el-collapse-item v-for="(v, i) in chapterData" :key="i" :name="v.id">
												<template slot="title">
													<p class="chapter-name sheng" :title="v.name">{{ '第' + (v.index + 1) + '章：' + v.name }}</p>
												</template>
												<div class="chapter-subsection">
													<p
														class="subsection-name"
														:class="[{ actives: m.id == nodeId }]"
														v-for="m in v.childList"
														:key="m.id"
														@click="handleClick(m)"
													>
														{{ '第' + (m.index + 1) + '节：' + m.name }}
													</p>
													<p v-show="v.childList.length == 0" style="color: #999">暂无数据</p>
												</div>
											</el-collapse-item>
										</el-collapse>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>

				<!-- <div class="score-info clearfix">
          <div class="fl">
            <concernedLog txtShow :type="1" :resId="courseId" size="5" />
          </div>
          <div class="fl score">
            <Score :resId="courseId" :resType="1" />
          </div>
          <el-button class="discuss">实时讨论</el-button>
        </div> -->
			</el-card>
		</div>
		<div class="bot-file-tab">
			<el-card class="box-card">
				<div class="file-list">
					<p class="tabLabel">
						<span></span>
						{{ tabLabel }}
					</p>
					<el-table :data="tableData" stripe style="width: 100%" v-if="activeName != 5 && activeName != 6">
						<el-table-column prop="sysAttachment" label="缩略图" width="100">
							<template slot-scope="scope">
								<div class="img-box">
									<img class="thumbnail" :src="scope.row | fileThumbnail" />
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="资源名称"></el-table-column>
						<el-table-column prop="size" label="资源大小">
							<template slot-scope="scope">{{ scope.row.size | fileSizeFilter }}</template>
						</el-table-column>
						<el-table-column prop="type" label="资源类型">
							<template slot-scope="scope">
								<div>{{ scope.row.sysAttachment.attrSuffixStr }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间"></el-table-column>
						<el-table-column label="操作" width="180">
							<template slot-scope="{ row }">
								<el-button-group>
									<el-button type="success" size="mini" @click="handleLook(row)">预览</el-button>
									<el-button type="primary" size="mini" @click="handleDownload(row)">下载</el-button>
								</el-button-group>
							</template>
						</el-table-column>
						<div slot="empty" class="emptyBg">
							<el-empty :image-size="200"></el-empty>
						</div>
					</el-table>
					<div v-if="activeName == '5'">
						<div v-show="knowledgeId">
							<!-- 评价 -->
							<Review :courseId="courseId" :knowledgeId="knowledgeId" resType="2" type="1" />
						</div>
					</div>
					<div v-if="activeName == '6' && courseType == 6">
						<div class="teacherInfo clearfix" v-if="teacherData">
							<div class="fl headPic">
								<img :src="teacherData.attachmentId == '-1' ? headPic : teacherData.sysAttachment.httpUrl" />
							</div>
							<div class="fr teachers">
								<div class="con">
									<div class="head">
										<div class="name">
											{{ teacherData.userName }}
										</div>
										<div class="note">{{ teacherData.rank }} {{ teacherData.jobTitle }} | {{ teacherData.deptName }}</div>
									</div>
									<div class="text sinodetail-sttxt" v-html="teacherData.content"></div>
									<div class="btn">
										<a href="javascript:;" class="sinodetail-stbtn"></a>
									</div>
								</div>
							</div>
						</div>
						<el-empty v-else description="暂无数据"></el-empty>
					</div>
				</div>
			</el-card>
		</div>
		<Preview />
	</div>
</template>

<script>
import {
	openApiSysCourseChapterQuery,
	openApiSysCourseQuery,
	openApiSysKnowledgeQuery,
	openApiSysCourseRelatedRecommend,
	openApiTbSysUserQuery
} from '@/api/openApi';
import Bus from '@/utils/bus.js';
import CourseList from '@/components/home/courseList.vue';
import webinfo from '@/mixins/webinfo.js';
import download from '@/mixins/download';
export default {
	mixins: [webinfo, download],
	components: {
		OrnamentImg: () => import('../../components/OrnamentImg.vue'),
		ConcernedLog: () => import('@/components/home/concernedLog.vue'),
		Score: () => import('@/components/home/score.vue'),
		Video: () => import('@/components/video/index.vue'),
		Review: () => import('@/components/review/index.vue'),
		longCourseCard: () => import('../components/longCourseCard.vue'),
		CourseList: () => import('@/components/home/courseList.vue'),
		Preview: () => import('@/components/resource/preview.vue')
	},
	data() {
		return {
			loading: true,
			activeName: '1',
			knowledgeId: '',
			active: '',
			knowledgeData: {
				id: ''
			},
			courseId: this.$route.query.courseId,
			tabList: [
				{
					name: '教学课件',
					type: '1',
					file: []
				},
				{
					name: '课程教案',
					type: '2',
					file: []
				},
				{
					name: '教学设计',
					type: '3',
					file: []
				},
				{
					name: '资源下载',
					type: '4',
					file: []
				}
				// {
				//   name: '资源评论',
				//   type: '5',
				// },
				// {
				//   name: '授课教师',
				//   type: '6',
				// },
			],
			tableData: [],
			pageObj: {},
			listQuery: {
				page: 1,
				limit: 10
			},
			chapterData: [],
			courseData: [],
			nodeData: [],
			nodeId: '',
			videoUrl: '',
			recommendData: [],
			strategy: '',
			courseType: '',
			courseDataV: [],
			showChapter: false,
			fullScreenShow: false,
			tabLabel: '培训资源',
			teacherData: [],
			learningStatus: true // true 查看完整视频，false,体验五分钟
		};
	},
	watch: {
		$route(to, from) {
			this.courseId = to.query.courseId;
			this.getInfo();
			this.getRecommendData();
		}
	},
	mounted() {
		this.getReviewType();
		this.getInfo();
		this.getRecommendData();
	},
	methods: {
		async getReviewType() {
			let res = await this.$store.dispatch('getDictionaryVal', 'REVIEW_SWITCH');
			if (res[0] != 1) {
				this.tabList = this.tabList.filter((v) => v.type != 5);
			}
		},
		// 获取当前课程信息
		getInfo() {
			if (!this.courseId) return;
			this.loading = true;
			openApiSysCourseQuery({ id: this.courseId }).then((res) => {
				this.courseData = res.data.data[0];
				this.courseDataV = res.data.data;
				this.courseType = this.courseData.courseType;
				this.tabList.forEach((t, index) => {
					if (this.courseType == 5) {
						if (index == 5) {
							this.tabList = this.tabList.slice(0, index);
						}
					}
					this.courseData.sysCourseFiles.forEach((c) => {
						if (c.type == t.type) {
							t.file.push(c);
						}
					});
				});
				if (this.courseType == 5) {
					this.getList();
					this.showChapter = true;
				} else {
					this.showChapter = false;
				}
				this.tabList.forEach((item) => {
					if (item.file.length > 0) {
						this.tableData = [...this.tableData, ...item.file];
					}
				});
				this.loading = false;
				this.getTeacherInfo();
			});
		},
		// 相关推荐
		getRecommendData() {
			let data = {
				recommendId: this.courseId,
				limit: 4,
				page: 1,
				courseType: this.$route.meta.type
			};
			openApiSysCourseRelatedRecommend(data).then((res) => {
				this.recommendData = res.data.data;
			});
		},
		// 获取章节列表信息
		getList() {
			openApiSysCourseChapterQuery({
				pid: 0,
				courseId: this.courseId
			}).then((res) => {
				this.chapterData = res.data.data;
				this.chapterData.forEach((m, idx) => {
					if (idx == 0) {
						this.active = m.id;
					}
					m.index = idx;

					m.childList.forEach((n, index) => {
						n.childList = [];
						n.index = index;
						if (m.index == 0) {
							this.nodeId = n.id;

							this.getNodeInfo();
						}
					});
				});
				if (this.chapterData.length == 1) {
					if (this.chapterData[0].childList.length == 1) {
						this.fullScreenShow = true;
					} else {
						this.fullScreenShow = false;
					}
				}
			});
		},
		// 点击节点 获取视频信息
		handleClick(v) {
			this.nodeId = v.id;

			this.getNodeInfo();
		},
		// tab 资料切换
		handleTabList(tab, event) {
			this.tabLabel = tab.label;
			var newArr = this.tabList.filter((val) => val.type === this.activeName);

			this.tableData = newArr[0].file;
		},
		// 获取节点信息 点击调用
		getNodeInfo() {
			var data = {
				page: 1,
				limit: 99,
				courseId: this.courseId,
				type: this.courseType,
				chapterId: this.nodeId,
				queryMode: this.$route.query.queryMode
			};
			openApiSysKnowledgeQuery(data).then((res) => {
				this.videoUrl = '';
				this.nodeData = res.data.data;
				this.knowledgeId = this.nodeData.length ? this.nodeData[0].id : '';
				if (this.nodeData.length > 0) {
					this.videoUrl = this.nodeData[0].sysAttachment.httpUrl;
					this.strategy = this.nodeData[0].strategy;
				}
			});
		},
		// 预览
		handleLook(row) {
			Bus.$emit('showPreview', row);
			// window.open(v.sysAttachment.httpUrl);
		},
		handleDownload(row) {
			this.downloadCall(row.fileId, row.name);
		},
		//  点击体验学习
		experienceVideoChange(type) {
			this.learningStatus = type;
			this.getList();
			this.showChapter = true;
		},
		//获取教师个人信息
		getTeacherInfo() {
			let data = {
				page: 1,
				limit: 10,
				userName: this.courseDataV[0].responsiblePerson
			};

			openApiTbSysUserQuery(data).then((res) => {
				this.teacherData = res.data.data[0];
			});
		},
		//体验学习五分钟结束后事件
		setLearningStatus() {
			this.showChapter = false;
		}
	}
};
</script>

<style scoped lang="scss">
#microDetail {
	max-width: 1400px;
	margin: 0 auto;
	margin-top: 50px;
	.top-video {
		margin-bottom: 30px;
		.top-title {
			p {
				font-size: 30px;
				font-weight: 600;
				color: var(--colorH1);
				margin-bottom: 15px;
			}
		}
		.player-box {
			width: 100%;
			height: 570px;
			background: #000;
		}
		.score-info {
			background: #f4f4f4;
			padding: 20px;
			position: relative;
			.score {
				padding-left: 40px;
			}
			.discuss {
				position: absolute;
				right: 45px;
				top: 16px;
			}
			.el-button {
				background-color: #c16c78;
				color: #fff;
			}
			.el-button:focus,
			.el-button:hover {
				color: #fff;
				border-color: #e3b2b9;
				background-color: #e3b2b9;
			}
		}
		.chapter-wrap {
			position: relative;

			.chapter-title::before {
				content: '';
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: pink;
				transform: rotate(45deg);
				left: 6%;
				top: 77px;
			}
			.chapter--wrap-item {
				.chapter-name {
					font-weight: 900;
					font-size: 14px;
					padding: 8px 5px;
					color: #333;
				}
				.active {
					color: #c16c78;
				}
				.chapter-subsection {
					padding-left: 40px;
					.subsection-name {
						cursor: pointer;
						font-size: 14px;
					}
					p.subsection-name.actives {
						color: #b30808;
					}
					.subsection-name:hover {
						color: #b30808;
					}
				}
			}
		}
	}
	.bot-file-tab {
		margin-bottom: 40px;
		min-height: 500px;
		.file-list {
			min-height: 500px;
			// margin: 30px;
		}
	}
	.img-box {
		padding: 2px;
		width: auto;
		height: 40px;
		display: inline-block;
		img {
			width: auto;
			height: 100%;
			max-width: 60px;
		}
	}
	.recommend {
		font-size: 20px;
		font-weight: 900;
	}
	.tabLabel {
		font-size: 20px;
		font-weight: 900;

		border-radius: 3px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 20px;
		margin-bottom: 20px;
		span {
			display: inline-block;
			width: 7px;
			height: 30px;
			background-color: var(--colorH1);
			margin-right: 20px;
			border-radius: 5px;
			margin-top: 10px;
			vertical-align: -8px;
		}
	}
	.teacherInfo {
		.fl.headPic {
			width: 150px;
			height: 150px;
			border-radius: 10px;
			img {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}
		.teachers {
			width: 859px;
			padding-left: 30px;
			.name {
				font-size: 18px;
				font-weight: bold;
				color: #333333;
				float: left;
				padding-right: 20px;
				min-width: 85px;
				box-sizing: border-box;
			}
			.note {
				font-size: 14px;
				color: #999999;
			}
			.text {
				width: auto;
				height: 72px;

				font-size: 14px;
				color: #999;
				line-height: 24px;
				margin-top: 30px;
			}
		}
	}
}
#microDetail .el-collapse {
	height: 570px;
	overflow: auto;
	border-left: 5px solid var(--colorH1);
}
#microDetail .el-collapse-item__content {
	padding-bottom: 0px;
}
#microDetail .el-collapse-item__header {
	height: auto;
}
.el-collapse-item.is-active .chapter-name {
	color: #b30808;
}
#microDetail i.el-collapse-item__arrow.el-icon-arrow-right.is-active {
	color: #b30808;
	font-weight: 900;
}
#microDetail .el-collapse-item__header.is-active {
	border-left: 4px solid #eca722;
}
#microDetail .el-collapse-item__header,
#microDetail .el-collapse-item__wrap {
	border-left: 4px solid #3d815a;
}
</style>
<style>
.bot-file-tab .el-tabs__item:hover,
.bot-file-tab .el-tabs__item.is-active {
	color: #fff !important;
	font-weight: 900;
	background: var(--colorH1);
}
.bot-file-tab .el-tabs__active-bar {
	background-color: var(--colorH1) !important;
}
.bot-file-tab .el-card__body {
	min-height: 500px;
}
.bot-file-tab .el-tabs__item {
	padding: 0px 55px;
	font-size: 18px;
}
.player-wrap.fullshow .el-col-18 {
	width: 100%;
}
.player-wrap.fullshow .video-js.vjs-fluid {
	padding-top: 0;
}
.player-wrap.fullshow .video-js .vjs-tech {
	/* height: 560px; */
}
.player-wrap.fullshow .video-js.vjs-fluid {
	height: 560px;
}
.player-wrap.fullshow .video-player.video-player.vjs-custom-skin {
	height: 580px;
}
.player-wrap.fullshow .video-wrap p.strategy-txt {
	right: 90px;
}
</style>
